<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="../../css/weui.min.css" />
    <link rel="stylesheet" type="text/css" href="../../css/jquery-weui.min.css" />
    <link rel="stylesheet" type="text/css" href="../../css/index.css" />
    <link rel="stylesheet" type="text/css" href="../../css/mine.css" />
    <title>运输车信息</title>
    <script src="../../js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../js/jquery-weui.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../js/baseConfig.js" type="text/javascript" charset="utf-8"></script>
    <script src=" http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
</head>
<style type="text/css">
    .weui-uploader__input-box {
        width: 4.4rem;
        height: 59px;
    }
    
    .weui-uploader__files li {
        height: 59px !important;
    }
</style>

<body>
    <!--<div id="header">
			<div class="header-title" style="position: fixed;top: 0;">
				<img src="../../img/left.png" class="left" />
				<span>运输车信息</span>
			</div>
		</div>-->
    <div class="transport-warp" style="margin-top: 0;">
        <div class="identity-type">
            <span>基本信息</span>
        </div>
        <div class="essen_list  transport_after transport_after2">
            <p>
                <span>车牌号</span>
                <input type="" name="" class="carNo" value="" placeholder="请填写车牌号" />
            </p>
            <p>
                <span>司机姓名</span>
                <input type="" name="" class="driver" value="" placeholder="请填写司机姓名" />
            </p>
            <p>
                <span>司机电话</span>
                <input type="" name="" class="phone" value="" placeholder="请填写司机电话" />
            </p>
            <p>
                <span>司机身份证</span>
                <input type="" name="" class="idCard" value="" placeholder="请填写司机身份证" />
            </p>
            <p>
                <span>装车时间</span>
                <input type="" name="" class="uploadTime" value="" placeholder="请选择装车时间" />
            </p>
            <p class="time">
                <span>预计到达时间</span>
                <input type="" name="" class="planTime" value="" placeholder="请选择预计到达时间" />
            </p>
            <p>
                <span>装车物料总量</span>
                <input type="" name="" class="weight" value="" disabled="disabled" style="border: 0;" /><em>吨</em>
            </p>
        </div>
        <!--物料列表-->
        <div class="identity-type">
            <span>物料列表</span>
            <i>添加装车物料</i>
        </div>
        <div class="material-list">
            <ul class="material_list transport-list">
                <!--<li>
						<p>
							<span>冰箱压缩机</span>
							<img src="../../img/right.png" />
						</p>
						<p>
							<span>物料重量</span>
							<b>556.34<em>吨</em></b>
						</p>
						<p>
							<span>订单编号</span>
							<b>HSGFHGKJH2017564654</b>
						</p>

					</li>-->
            </ul>
            <ol class="transport_photo_list">
                <form name="form1" id="form1">
                    <li class="shooseimg li1" style="position: relative;">
                        <input type="" id="img1" class="upload_pic upload" style="display: none;" />
                        <canvas class="cvs" id="cvs1" width="100" height="100"></canvas>
                        <img id="pic1" src="../../img/squarePhoto.png" />
                        <span>车牌号</span>
                    </li>
                    <li class="shooseimg li2">
                        <input type="" id="img2" class="upload_pic upload" style="display: none;" />
                        <canvas class="cvs" id="cvs2" width="100" height="100"></canvas>
                        <img id="pic2" src="../../img/squarePhoto.png" />
                        <span>司机照片1</span>
                    </li>
                    <li class="shooseimg li3">
                        <input type="" id="img3" class="upload_pic upload" style="display: none;" />
                        <canvas class="cvs" id="cvs3" width="100" height="100"></canvas>
                        <img id="pic3" src="../../img/squarePhoto.png" />
                        <span>司机照片2</span>
                    </li>
                    <li class="shooseimg li4">
                        <input type="" id="img4" class="upload_pic upload" style="display: none;" />
                        <canvas class="cvs" id="cvs4" width="100" height="100"></canvas>
                        <img id="pic4" src="../../img/squarePhoto.png" />
                        <span>身份证正面</span>
                    </li>
                </form>

            </ol>
            <p>磅单(可传多张)</p>
            <ol class="transport_photo_list">
                <form method="post" id="form2" action="##" enctype="multipart/form-data">
                    <div class="weui-cell" style="padding: 0;">
                        <div class="weui-cell__bd">
                            <div class="weui-uploader__bd">
                                <ul class="weui-uploader__files">

                                </ul>
                                <div class="weui-uploader__input-box">
                                    <input id="uploaderInput" name="file0" style="display: none;" class="weui-uploader__input js_file" type="file" accept="image/*">
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </ol>
            <div class="demos-content-padded">
                <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_default default" style="float: left;background: #e5e5e5;">取消</a>
                <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary confirm" style="float: right;margin-top: 0;background: #28c81e;">确定</a>
                <!--<a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary delete" style="float: right;background: #f65555;">删除</a>-->
            </div>
        </div>
        <div class="weui-gallery" style="display: none">
            <span class="weui-gallery__img"></span>
        </div>
    </div>
</body>
<script type="text/javascript">
    $(document).ready(function() {
        baseConfig.historyBack()
        var carNo = baseConfig.GetQueryString("carNo");
        var orderNo = baseConfig.GetQueryString("orderNo");
        imgUpload()
        if (!orderNo) {
            $(".weui-uploader__input-box input").hide()
            $("#form1 input").hide()
        } else {
            $(".weui-uploader__input-box input").show()
            $("#form1 input").show()
        }
        $(".weui-uploader__input-box input").attr("name", "file" + Math.round(Math.random() * 1000))

        function checkMobile(str) {
            var res = /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/;
            if (res.test(str)) {
                return str;
            } else {
                return false;
            }
        }

        function checkID(str) {
            var res = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
            if (res.test(str)) {
                return str;
            } else {
                return false;
            }
        }
        if (!orderNo && !carNo) {
            //点击装车物料进入编添加物料页面
            $(".uploadTime").datetimePicker({
                title: "选择装车时间"
            })
            $(".planTime").datetimePicker({
                title: "预计到达时间"
            })
            $(".identity-type i").on("click", function() {
                var carNo = $(".carNo").val(); //车牌号
                var driver = $(".driver").val(); //司机姓名
                var phone = $(".phone").val(); //司机电话
                var uploadTime = $(".uploadTime").val(); //装车时间
                var idCard = $(".idCard").val(); //司机身份证
                var planTime = $(".planTime").val(); //预计到达时间
                var weight = $(".weight").val(); //装车物料总重量
                if (!carNo) {
                    $.toptip("请输入车牌号", 1200, 'error');
                } else if (!driver) {
                    $.toptip("请输入司机姓名", 1200, 'error');
                } else if (!phone) {
                    $.toptip("司机电话不能为空", 1200, 'error');
                } else if (checkMobile(phone) == false) {
                    $.toptip("请输入正确的电话", 1200, 'error');
                } else if (!idCard) {
                    $.toptip("身份证不能为空", 1200, 'error');
                } else if (checkID(idCard) == false) {
                    $.toptip("请输入正确的身份证号", 1200, 'error');
                } else if (!uploadTime) {
                    $.toptip("请选择装车时间", 1200, 'error');
                } else if (!planTime) {
                    $.toptip("请选择到达时间", 1200, 'error');
                } else {
                    location.href = "addTransportMaterial.html?carNo=" + carNo + "&driver=" + driver + "&phone=" + phone + "&uploadTime=" + uploadTime + "&idCard=" + idCard + "&planTime=" + planTime + "&weight=" + weight
                }

            })
            $(".confirm").on("click", function() {
                $.toptip("请先填写装车物料", 1200, 'error');
            })
            $(".default").on("click", function() {
                location.href = "mine.html"
            })
        } else {
            $.ajax({
                type: "get",
                url: baseConfig.localHttp + "weChatApi/fgclient/getTransInfo",
                async: false,
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                data: {
                    carNo: carNo,
                    orderNo: orderNo
                },
                success: function(data) {
                    console.log(data)
                    $.hideLoading();
                    if (data.code == 100) {
                        var transferInfoVo = data.content.transferInfoVo;
                        var goodsVoList = data.content.goodsVoList;
                        var urlVo = data.content.urlVo;
                        var $li = ""
                        var $imgli = ""
                        var id = transferInfoVo.id
                        var carNo = transferInfoVo.carNo; //车牌号
                        var driver = transferInfoVo.driver; //司机姓名
                        var phone = transferInfoVo.phone; //司机电话
                        var uploadTime = transferInfoVo.uploadTime; //装车时间
                        var idCard = transferInfoVo.idCard; //司机身份证
                        var planTime = transferInfoVo.planTime; //预计到达时间
                        //var weight = transferInfoVo.goodsWeight; //装车物料总重量
                        var weight = 0
                        $(".carNo").val(carNo);
                        $(".driver").val(driver);
                        $(".phone").val(phone);
                        $(".uploadTime").val(uploadTime);
                        $(".idCard").val(idCard);
                        $(".planTime").val(planTime);
                        //							$(".weight").val(weight)
                        $(".planTime").val(planTime)
                        $(".uploadTime").datetimePicker({
                            title: "选择装车时间"
                        })
                        $(".planTime").datetimePicker({
                            title: "预计到达时间"
                        })
                        for (var i = 0; i < goodsVoList.length; i++) {
                            $li += "<li data-id=" + goodsVoList[i].voId + " data-No=" + goodsVoList[i].orderNo + " data-GoodsNo=" + goodsVoList[i].goodsNo + "><p><span>" + goodsVoList[i].goodsName + "</span><img src='../../img/right.png' /></p>"
                            $li += "<p><span>物料重量</span><b>" + goodsVoList[i].goodsWeight + "<em>吨</em></b></p>"
                            $li += "<p><span>订单编号</span><b>" + goodsVoList[i].orderNo + "</b></p></li>"
                            weight += parseInt(goodsVoList[i].goodsWeight)
                        }
                        $(".weight").val(weight)
                        $(".transport-list").append($li)
                        for (var j = 0; j < $(".transport-list li").length; j++) {
                            $(".transport-list li").eq(j).on("click", function() {
                                var voId = $(this).attr("data-id")
                                var goodsNo = $(this).attr("data-GoodsNo")
                                location.href = "transportAddmaterial.html?orderNo=" + orderNo + "&id=" + id + "&goodsNo=" + goodsNo + "&carNo=" + carNo + "&driver=" + driver + "&phone=" + phone + "&uploadTime=" + uploadTime + "&idCard=" + idCard + "&planTime=" + planTime + "&weight=" + weight + "&voId=" + voId
                            })
                        }
                        //获取照片
                        var images = data.content.urlVo
                        if (!images) {

                        } else {
                            if (!images.carNoPic) {} else {
                                $("#pic1").attr("src", baseConfig.imglocalHttp + images.carNoPic)
                            }
                            if (!images.driverPic1) {} else {
                                $("#pic2").attr("src", baseConfig.imglocalHttp + images.driverPic1)
                            }
                            if (!images.driverPic2) {} else {
                                $("#pic3").attr("src", baseConfig.imglocalHttp + images.driverPic2)
                            }
                            if (!images.idCardPic) {} else {
                                $("#pic4").attr("src", baseConfig.imglocalHttp + images.idCardPic)
                            }
                        }
                        var poundList = data.content.poundList
                        var $li = ""
                        for (var i = 0; i < poundList.length; i++) {
                            $li += "<li class='weui-uploader__file'  style='background-image:url(" + baseConfig.imglocalHttp + poundList[i] + ")'>"
                        }
                        $(".weui-uploader__files").append($li)
                            //点击装车物料进入编添加物料页面
                        $(".identity-type i").on("click", function() {
                            var carNo = $(".carNo").val(); //车牌号
                            var driver = $(".driver").val(); //司机姓名
                            var phone = $(".phone").val(); //司机电话
                            var uploadTime = $(".uploadTime").val(); //装车时间
                            var idCard = $(".idCard").val(); //司机身份证
                            var planTime = $(".planTime").val(); //预计到达时间
                            var weight = $(".weight").val(); //装车物料总重量
                            if (!carNo || !driver || !phone || !uploadTime || !idCard || !planTime || !weight) {
                                $.toptip("请先完善基本信息", 1200, 'error');
                            } else {
                                location.href = "addTransportMaterial.html?orderNo=" + orderNo + "&id=" + id + "&carNo=" + carNo + "&driver=" + driver + "&phone=" + phone + "&uploadTime=" + uploadTime + "&idCard=" + idCard + "&planTime=" + planTime + "&weight=" + weight
                            }

                        })

                    } else {
                        $.toptip(data.content, 1200, 'error');
                    }
                },
                error: function() {
                    $.hideLoading();
                }
            })
            $(".shooseimg").find("input").attr("type", "file")
                //图片上传部分		
                // 允许上传的图片类型
                //				var allowTypes = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif'];
                // 1024KB，也就是 1MB
                //				var maxSize = 1024 * 1024;
                // 图片最大宽度
            var maxWidth = 1000;
            // 最大上传图片数量
            var maxCount = 1;

            $('#img1').on('change', function(event) {
                chooseImg(event, "img1", "cvs1", "image1", "pic1")
            })
            $('#img2').on('change', function(event) {
                chooseImg(event, "img2", "cvs2", "image2", "pic2")
            })
            $('#img3').on('change', function(event) {
                chooseImg(event, "img3", "cvs3", "image3", "pic3")
            })
            $('#img4').on('change', function(event) {
                chooseImg(event, "img4", "cvs4", "image4", "pic4")
            })

            function chooseImg(event, name, name2, name3, name4) {
                var files = event.target.files;
                // 如果没有选中文件，直接返回
                if (files.length === 0) {
                    return;
                }
                var input1 = document.getElementById(name)
                input1.setAttribute("name", name3)
                var file = files[0];
                var reader = new FileReader();
                // 如果类型不在允许的类型范围内
                reader.onload = function(e) {
                    var img = new Image();
                    img.onload = function() {
                        var canvas = document.getElementById(name2);
                        var ctx = canvas.getContext("2d");
                        ctx.clearRect(0, 0, canvas.width, canvas.height);
                        ctx.drawImage(img, 0, 0, 100, 100);
                        var imgPic = document.getElementById(name4)
                        imgPic.style.display = "none"
                        imgPic.setAttribute("data-img", "true")
                        var formData = new FormData($("#form1")[0])
                        formData.append("orderNo", orderNo);
                        formData.append("carNo", carNo);
                        //						formData.append("imgType", name3)
                        input1.setAttribute("name", "")
                        $.ajax({
                            type: "post",
                            url: baseConfig.localHttp + "weChatApi/fgclient/uploadTranPic",
                            data: formData,
                            contentType: false,
                            processData: false,
                            success: function(data) {
                                //								console.log(data)
                                if (data.code == 100) {

                                } else {

                                }
                            },
                            error: function() {
                                $.hideLoading();
                                $.toast("请求失败", "cancel");
                            }
                        })
                    };
                    img.src = e.target.result;
                };
                reader.readAsDataURL(file);
            }
            //提交
            $(".confirm").on("click", function() {
                var carNo = $(".carNo").val(); //车牌号
                var driver = $(".driver").val(); //司机姓名
                var phone = $(".phone").val(); //司机电话
                var uploadTime = $(".uploadTime").val(); //装车时间
                var idCard = $(".idCard").val(); //司机身份证
                var planTime = $(".planTime").val(); //预计到达时间
                var weight = $(".weight").val(); //装车物料总重量
                if (!carNo || !driver || !phone || !uploadTime || !idCard || !planTime || !weight) {
                    $.toptip("请先完善基本信息", 1200, 'error');
                } else {
                    imgUpload()
                    $(".weui-uploader__input-box").find("input:last").attr("name", "")
                    var formData = new FormData($("#form2")[0])
                    formData.append("carNo", baseConfig.GetQueryString("carNo"))
                    formData.append("orderNo", baseConfig.GetQueryString("orderNo"));
                    $.ajax({
                        type: "post",
                        url: baseConfig.localHttp + "weChatApi/fgclient/uploadPoundPic",
                        data: formData,
                        contentType: false,
                        processData: false,
                        success: function(data) {
                            console.log(data)
                            if (data.code == 100) {
                                $.toptip(data.content, 1200, 'success');
                            } else {

                            }
                        },
                        error: function() {
                            $.hideLoading();
                            $.toast("请求失败", "cancel");
                        }
                    })
                    setTimeout(function() {
                        $.ajax({
                            type: "get",
                            url: baseConfig.localHttp + "weChatApi/fgclient/saveTransInfo",
                            async: false,
                            headers: {
                                'Content-Type': 'application/x-www-form-urlencoded'
                            },
                            data: {
                                driver: driver,
                                phone: phone,
                                uploadTime: uploadTime,
                                idCard: idCard,
                                planTime: planTime,
                                orderNo: orderNo,
                                carNo: carNo
                            },
                            success: function(data) {
                                console.log(data)
                                if (data.code == 100) {
                                    location.href = "transportList.html?orderNo="+orderNo+"&status=2"
                                } else {

                                }
                            },
                            error: function() {
                                $.toptip("请确认到达时间格式是否正确", 1500, 'error');
                            }
                        })
                    }, 1200)

                }

            })

        }
        //点击取消回到我的页面
        $(".default").on("click", function() {
            location.href = "mine.html"
        })

        function imgUpload() {
            // 允许上传的图片类型
            //		var allowTypes = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif'];
            // 1024KB，也就是 1MB
            //		var maxSize = 1024 * 1024;
            // 图片最大宽度
            var maxWidth = 1000;
            // 最大上传图片数量
            var maxCount = 6;
            var index = Math.round(Math.random() * 1000)

            $('.weui-uploader__input-box').on('change', '.js_file', function(event) {
                var files = event.target.files;
                // 如果没有选中文件，直接返回				
                index++
                var $input = $("<input id='uploaderInput' name='file" + index + "' class='weui-uploader__input js_file' type='file' accept='image/*'>")
                $(".weui-uploader__input-box").append($input);

                if (files.length === 0) {
                    return;
                }

                for (var i = 0, len = files.length; i < len; i++) {
                    var file = files[i];
                    var reader = new FileReader();
                    // 如果类型不在允许的类型范围内
                    //				if(allowTypes.indexOf(file.type) === -1) {
                    //					$.weui.alert({
                    //						text: '该类型不允许上传'
                    //					});
                    //					continue;
                    //				}
                    //				if(file.size > maxSize) {
                    //					$.weui.alert({
                    //						text: '图片太大，不允许上传'
                    //					});
                    //					continue;
                    //				}
                    //				if($('.weui_uploader_file').length >= maxCount) {
                    //					$.weui.alert({
                    //						text: '最多只能上传' + maxCount + '张图片'
                    //					});
                    //					return;
                    //				}
                    reader.onload = function(e) {
                        var img = new Image();
                        img.onload = function() {
                            // 不要超出最大宽度
                            var w = Math.min(maxWidth, img.width);
                            // 高度按比例计算
                            var h = img.height * (w / img.width);
                            var canvas = document.createElement('canvas');
                            var ctx = canvas.getContext('2d');
                            // 设置 canvas 的宽度和高度
                            canvas.width = w;
                            canvas.height = h;
                            ctx.drawImage(img, 0, 0, w, h);
                            var base64 = canvas.toDataURL('image/png');
                            // 插入到预览区
                            var $preview = $('<li class="weui-uploader__file weui-uploader__file_status" style="overflow:hidden"><img src=' + base64 + ' class="baseImg"><div class="weui-uploader__file-content">0%</div></li>');
                            $('.weui-uploader__files').append($preview);

                            // 然后假装在上传，可以post base64格式，也可以构造blob对象上传，也可以用微信JSSDK上传

                            //图片预览
                            // $(".weui-uploader__files li").on("click", function() {
                            //         var src = $(this).css("background-image")
                            //         $(".weui-gallery").show()
                            //         $(".weui-gallery__img").css("background-image", src)
                            //         $(".weui-gallery").on("click", function() {
                            //             $(this).hide()
                            //         })
                            //     })
                            var imgsurl = [];
                            var nowurl = '';
                            var imgObj = $(".weui-uploader__files li .baseImg");
                            for (var i = 0; i < imgObj.length; i++) {
                                imgsurl[i] = imgObj[i].src;
                                imgObj[i].onclick = function() {
                                    nowurl = this.src;
                                    wx.previewImage({
                                        current: nowurl,
                                        urls: imgsurl
                                    });
                                }
                            }
                            //图片删除	
                            $(".weui-uploader__file .delete").on("click", function(event) {
                                    event.stopPropagation() //阻止事件冒泡行为
                                    var Index = $(this).attr("index")
                                    sessionStorage.setItem("Index", Index)
                                    var that = $(this)
                                    $.confirm("确定删除这张图片么？", function() {
                                        $(that).parents().find(".weui-uploader__input-box input").eq(sessionStorage.getItem("Index") - 1).remove()
                                        sessionStorage.removeItem("Index")
                                        $(that).parent().remove()
                                            //console.log($(".weui-uploader__input-box input"))
                                    }, function() {
                                        sessionStorage.removeItem("Index")
                                            //取消之后的回调
                                    })
                                })
                                //上传进度
                            var progress = 0;

                            function uploading() {
                                $preview.find('.weui-uploader__file-content').text(++progress + '%');
                                if (progress < 100) {
                                    setTimeout(uploading, 30);
                                } else {
                                    //如果是失败，塞一个失败图标
                                    $preview.find('.weui-uploader__file-content').html('<i class="weui_icon_warn"></i>');
                                    $preview.removeClass('weui-uploader__file_status')
                                        .find('.weui-uploader__file-content')
                                        .remove();
                                }
                            }
                            setTimeout(uploading, 30);
                        };
                        img.src = e.target.result;
                    };
                    reader.readAsDataURL(file);
                }

            });
        }
    })
</script>

</html>